<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitleNear title="一键分享"></commonTitleNear>
		</view>
		<!-- #endif -->
		<scroll-view  scroll-y="true" class="scroll-Y scroll-box">
			
			<view  class="scroll-view-item item-share">
				<!-- 分享 -->
				<view class="share-block">
					<view class="share-block-text">
						熊猫优选的商品图片经过特别优化，分享到微信朋友圈可获
						 得最佳效果
					</view>
					<view class="share-button" @tap="openShare">分享</view>
				</view>
				
				<!-- 分享box -->
				<!-- <shareBox></shareBox> -->
				<view class="imgs" v-if="qcodeList.length>0">
					<view class="box" v-for="(item,index) in qcodeList" :key="index" @tap="choseImgbtn(index)">
						<image :src="item.qrcode" class="shareimg"></image>
						<image :src="item.isChose?'../../static/common/chose-yes.png': '../../static/common/chose-no.png'" 
						class="chose"
						
						></image>
					</view>
				</view>
				<!-- 专题页 -->
				<!-- <view class="special-page">
					<navigator url="../specialArea/specialArea?title='专题页详情'" hover-class="none">
						<image src="../../static/common/special-page-btn.png" class="special-page-btn"></image>
					</navigator>
					
				</view> -->
			</view>
			<!-- 分享 -->
			<uni-popup ref="showshare" :type="type">
				<view class="uni-share">
					<text class="uni-share-title">分享到</text>
					<view class="uni-share-content">
						<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box"
						@tap="userEdit(index)"
						>
							<view class="uni-share-content-image">
								<image :src="item.icon" class="content-image" mode="widthFix" />
							</view>
							<text class="uni-share-content-text">{{ item.text }}</text>
						</view>
					</view>
					<text class="uni-share-btn" @click="cancel('share')">取消分享</text>
				</view>
			</uni-popup>
			
		</scroll-view>
	</view>
	
</template>

<script>
	import commonTitleNear from'../../components/titile-near/title.vue'
	import shareBox  from'../../components/share/share-box.vue'
	import uniPopup  from'../../components/uni-popup/uni-popup.vue'
	export default{
		data(){
			return{
				type: 'bottom',
				bottomData:[],
				apptoken:"",
				qcodeList:[]
			}
		},
		components:{
			commonTitleNear,
			shareBox,
			uniPopup
		},
		onLoad(option){
			this.apptoken = uni.getStorageSync('apptoken');
			this.bottomData = this.$Data.bottomData;
			this.getShareImgs(option.str);
		},
		methods:{
			userEdit(index){
				//分享操作
				console.log(index);
				switch(index){
					case 0:
						this.sharewx();
						break;
					case 1:
						this.sharewx();
						break;
					case 2:
						this.seave();
						break;
				}
			},
			sharewx(){
				//微信好友/朋友圈
				//原生分享，可分享多图
					const _this = this;
					const  qrcode = [];
					const pictures = this.qcodeList.filter(item=>{
						return item.isChose == true;
						
					})
					pictures.forEach(item=>{
						qrcode.push(item.qrcode)
					})
					//#ifdef APP-PLUS
				  plus.share.sendWithSystem(
						{
							type:"image",
							pictures:qrcode,
						}, 
						 function(){
									console.log('分享成功');
									_this.cancel('share');
							}, function(e){
									console.log('分享失败：'+JSON.stringify(e));
							}
					)
					//#endif
			},
			seave(){
				//保存到相册
				const _this = this;
				const  qrcode = [];
				const pictures = this.qcodeList.filter(item=>{
					return item.isChose == true;
					
				})
				pictures.forEach(item=>{
					qrcode.push(item.qrcode)
				})
				const lengths = qrcode.length - 1;
				console.log(lengths)
				qrcode.forEach((item,index)=>{
					console.log(item);
					console.log(index)
					uni.saveImageToPhotosAlbum({
					    filePath: item,
					    success: function () {
								if(index == lengths){
									uni.showToast({
										title:"已保存到相册"
									})
									_this.cancel('share');
								}
					    }
					});
				})
			},
			choseImgbtn(index){
				//反选
				console.log(index)
				this.qcodeList[index].isChose = !this.qcodeList[index].isChose;
			},
			getShareImgs(str){
				console.log(str);
				uni.showLoading({
					title:"正在生成分享图片"
				})
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.tbk_tk_qrcode,
					data:{apptoken:this.apptoken,goodsId:str},
					success(res) {
						console.log(res)
						if(res.data.success){
							uni.hideLoading()
							res.data.data.forEach(item=>{
								const d = {
									isChose:false,
									qrcode:item.data.qrcode
								};
								// d.isChose = false;
								// d.qrcode = item.data.qrcode;
								_this.qcodeList.push(d);
							})
							console.log(_this.qcodeList)
						}
					}
				})
			},
			openShare(){
				const choseList = this.qcodeList.filter(item=>{
					return item.isChose == true
				})
				console.log(choseList)
				if(choseList.length>0){
					this.$refs.showshare.open()
					
				}else{
					 this.$CommonJS.showToast("请选择要分享的图片")
				}
				
			},
			cancel(type) {
				this.$refs['show' + type].close()
			}
		}
	}
</script>

<style>
	@import url("optimization.css");
</style>
